import React from 'react'
import { Layout } from 'antd';
import {
    MenuFoldOutlined,
    MenuUnfoldOutlined,
  } from '@ant-design/icons';
import style from './Headbar.module.css'
import { Dropdown, Menu, Space } from 'antd';
import { Avatar, Image } from 'antd';
import { useNavigate } from 'react-router-dom';
import { connect } from 'react-redux';

const { Header } = Layout;

 function Headbar(props) {
  const { collapsed, changeCollapsed} = props;
  const navigate = useNavigate();
  let {role:{roleName}, username} = JSON.parse(localStorage.getItem('token'))
  const menu = (
    <Menu
      items={[
        {
          key: '1',
          label: <span>{roleName}</span>  
          ,
        },
        {
          key: '2',
          danger: true,
          label: '退出登录',
          onClick:()=>{
            localStorage.clear();
            navigate('/login')
          }
        },
      ]}
    />
  );
  return (
    <Header
        className="site-layout-background"
        style={{
        padding: 0,
        }}
    >
        {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
        className: 'trigger',
        onClick: () => changeCollapsed()
        })}
        <div className={style.welcome}>
            <Dropdown overlay={menu}>
                <Space>
                    <span>你好,<span style={{color:'red'}}>{username}</span> &emsp;</span>
                    <Avatar src={<Image src="https://joeschmoe.io/api/v1/random" style={{ width: 32 }} />} />
                </Space>
            </Dropdown>
        </div>
    </Header>
  )
}

const mapStateToProps = (state) => {
  return {
    collapsed: state.CollapsedReducer.collapsed
  }
}

const mapDispatchToProps = {
  changeCollapsed(){
    return {
      type: 'change-collapsed'
    }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Headbar)